<template>
	<div class="page">
		<div class="content">
			<view class="row">
				<label>头像</label>
				<view></view>
				<!-- #ifdef APP-PLUS -->
				<button @click='chooseImage()'>
					<image class="avatar" :src="avatar || '/static/images/default_avatar.png'" mode="aspectFill"></image>
				</button>
				<!-- #endif -->

				<!-- #ifdef MP-WEIXIN -->
				<button open-type="chooseAvatar" @chooseavatar='chooseAvatar'>
					<image class="avatar" :src="avatar || '/static/images/default_avatar.png'" mode="aspectFill"></image>
				</button>
				<!-- #endif -->
				<image src="/static/images/ic_next.png"></image>
			</view>
			<view class="row">
				<label>昵称</label>
				<input v-model="name" type="nickname" placeholder="请输入昵称" />
			</view>
			<picker :range="sexList" range-key="name" :value="0" @change="changeSex">
				<view class="row">
					<label>性别</label>
					<view>{{sex.name || '请选择'}}</view>
					<image src="/static/images/ic_next.png"></image>
				</view>
			</picker>
			<view style="display: none;" class="row">
				<label>邀请码</label>
				<input v-model="invitationCode" type="text" placeholder="【选填】请输入邀请码" />
			</view>
		</div>
		<div class="bottom">
			<view @click="goLogin()">已有账号，前往登录</view>
			<button @click="save()">开启</button>
		</div>
	</div>
</template>
<script>
	import {
		getUserInfo,
		registered,
		uploadFile
	} from "@/apis/request.js";

	export default {
		data() {
			return {
				avatar: null,
				name: null,
				invitationCode: null,
				sex: {},
				params: {},
				sexList: [{
					name: '女',
					value: 2
				}, {
					name: '男',
					value: 1
				}]
			};
		},
		created() {
			this.invitationCode = uni.getStorageSync('inviteCode');
			// #ifdef APP-PLUS
			uni.getUserInfo({
				provider: "weixin",
				success: (res) => {
					if (res.userInfo) {
						this.avatar = res.userInfo.avatarUrl;
						this.name = res.userInfo.nickName;
						if (res.userInfo.gender == 0) {
							//用户性别：0-男，1-女，2-保密；男的需要默认回显、其他的都是默认女的不处理
							this.sex = this.sexList[1];
						}
					}
				},
				fail: (err) => {
					console.error(err);
				}
			});
			// #endif
		},
		methods: {
			/**
			 * 跳转登录界面
			 */
			goLogin() {
				uni.redirectTo({
					url: '/pages/LoginPages/mylogin/main'
				});
			},
			/**
			 * 选择图片【用于非微信小程序的选择更换头像】
			 */
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: 'original',
					sourceType: ['camera', 'album'],
					success: (res) => {
						this.uploadimage(res.tempFilePaths[0]);
					}
				});
			},
			/**
			 * 微信小程序选择头像的返回回调
			 * @param {Object} e 选择的头像信息
			 */
			chooseAvatar(e) {
				this.uploadimage(e.detail.avatarUrl);
			},
			/**
			 * 图片上传
			 * @param {Object} file
			 */
			uploadimage(filePath) {
				uploadFile(filePath).then(res => {
					this.avatar = res;
				}).catch(err => {
					this.$Toast('上传失败，请重试！');
				});
			},
			changeSex(e) {
				this.sex = this.sexList[e.detail.value];
			},
			save() {
				if (!this.avatar) {
					this.$Toast('请选择头像');
					return;
				}
				if (!this.name) {
					this.$Toast('请输入昵称');
					return;
				}
				if (!this.sex) {
					this.$Toast('请选择性别');
					return;
				}
				const id = uni.getStorageSync('userInfo').id;
				registered({
					id: id,
					avatar: this.avatar,
					name: this.name,
					nickName: this.name,
					sex: this.sex.value,
					invitationCode: this.invitationCode
				}).then((res) => {
					uni.removeStorageSync('inviteCode');
					this.userInfo();
				}).catch(err => {
					this.$Toast(err.message || '请求失败，请重试！');
				});
			},
			userInfo() {
				getUserInfo({}).then(res => {
					uni.setStorage({
						key: 'userInfo',
						data: res,
						success() {
							uni.reLaunch({
								url: '/pages/index/main'
							});
						}
					});
				}).catch(err => {
					this.$Toast(err.message || '请求失败，请重试！');
				})
			},
		},
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100%;
		min-height: 100vh;
		background-color: #F2F2F2;

		.content {
			background-color: #FFFFFF;

			.row {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 20rpx 30rpx;
				width: calc(100% - 60rpx);
				border-top: 1rpx solid #F2F2F2;

				view {
					flex: 1;
					padding: 5upx 0;
					text-align: end;
				}

				input {
					flex: 1;
					margin-left: 20upx;
					text-align: end;
				}

				image {
					margin-left: 10rpx;
					width: 20rpx;
					height: 35rpx;
				}

				button {
					padding: 0;
					width: 120rpx;
					height: 120rpx;
					border-radius: 100%;
				}

				button::after {
					border: none;
				}

				.avatar {
					margin: 0;
					width: 120rpx;
					height: 120rpx;
				}
			}
		}

		.bottom {
			position: fixed;
			display: flex;
			flex-direction: column;
			align-items: center;
			bottom: 0;
			left: 0;
			right: 0;

			view {
				font-size: 26rpx;
				color: #999999;
			}

			button {
				width: calc(100% - 60rpx);
				margin: 30rpx;
				color: #FFFFFF;
				text-align: center;
				border-radius: 50rpx;
				font-size: 32rpx;
				background: #32C59A;
			}
		}
	}
</style>